import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Row,
  Col,
  Card,
  Icon,
  Tooltip,
  Input,
  Spin,
  Pagination,
  Table,
  Drawer,
  Form,
  Select,
  Switch,
  Modal,
  message
} from 'antd';
import styles from './index.less';
import editImg from '@/assets/basic/customDictionary/xiazi.png';
import sy from '@/assets/basic/customDictionary/sy.png';
import bianji from '@/assets/basic/customDictionary/bianji.png';
import edit from '@/assets/basic/customDictionary/edit.png';
import moreImg from '@/assets/knowledge/more.png';
import qdbuttom from '@/assets/account/robotSetup/qdbuttom.png';
import qxbuttom from '@/assets/account/robotSetup/qxbuttom.png';
import AddEditUser from './addEditUser';
import RedactEditUser from './redactEditUser';

const Search = Input.Search;
const FormItem = Form.Item;
const { Option } = Select;

class TeamWord extends Component {
  state = {
    list: [],
    total: '',
    login: false,
    current: 1,
    pageSize: 10,
    addModel: false,
    addModelRedact: null,
    drawerName: '',
    RedactEditUserObj: null,
    userId: this.props.currentUser.uid,
    cooperationId:'',
    sysList:[]
  };

  componentDidMount() {
    const { dispatch } = this.props;
    this.collaboraGetCollList();
    this.sysgetmenusByUserId()
  }

  // 获取数据
  collaboraGetCollList = () => {
    this.setState({ login: true });
    const { dispatch, currentUser } = this.props;
    const { userId,cooperationId,pageSize,current  } = this.state;
    let obj = {}
    obj={userId, robotId:currentUser.robotId,cooperationId,page:current,rows:pageSize}
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'teamWord/collaboraGetCollList',
        payload:obj,
        callback: res => {
          console.log('列表数据', res);
          res.data.list.map((item)=>{
            item.cooperationStatus=item.cooperationStatus==='0'?false:true
          })
          this.setState({ list: res.data.list, login: false, total:res.data.total });
        },
      });
    });
  };

  // 权限列表
  sysgetmenusByUserId = () => {
    this.setState({ login: true });
    const { dispatch, currentUser } = this.props;
    const { userId,cooperationId,pageSize,current  } = this.state;
    let obj = {}
    obj={userId, robotId:currentUser.uid}
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'teamWord/sysgetmenusByUserId',
        payload:obj,
        callback: res => {
          console.log('列表数据', res);
          this.setState({sysList:res.data})
        },
      });
    });
  };

  // 删除操作
  deleteObject = (item, index) => {
    this.setState({ login: true });
    const { dispatch } = this.props;
    const robotvo = {
      userId: item.userId,
      cooperationId: item.cooperationId,
      robotId: item.robotId,
    };
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'teamWord/collaboraDelcoll',
        payload: robotvo ,
        callback: res => {
          console.log('删除列表', res);
          if (res.code === 0) {
            message['success'](`${res.msg}`);
            this.collaboraGetCollList();
          }else{
            this.setState({ login: false });
          }
        },
      });
    });
  };

  onChangeTable = a => {
    console.log(a);
    this.setState({ current: a },()=>{
      this.collaboraGetCollList()
    });
  };

  onShowSizeChangeTable = (a, b) => {
    console.log(a, b);
    this.setState({current:a,pageSize:b},()=>{
      this.collaboraGetCollList()
    })
  };

  onClosebj = () => {
    this.setState({
      addModel: false,
    });
  };

  append = () => {
    this.setState({
      addModel: true,
      addModelRedact: '1',
      drawerName: '添加',
    });
  };

  Redact = (item, index) => {
    this.setState({
      addModel: true,
      addModelRedact: '2',
      drawerName: '修改',
      RedactEditUserObj: item,
    });
  };

  operation = () => {
    // console.log
  };

  rktbonChange = (item, index) => {
    console.log(item, index);
    let obj = !item.cooperationStatus?'1':'0'
    console.log(obj)
    this.setState({ login: true });
    const { list } = this.state;
    list[index].cooperationStatus = !item.cooperationStatus;
    this.setState({ list }, () => {
      console.log(this.state.list);
    });
    const { dispatch } = this.props;
    const robotvo = {
      userId: item.userId,
      cooperationId: item.cooperationId,
      robotId: item.robotId,
      menuIds:item.menuIds,
      cooperationStatus:obj
    };
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'teamWord/editcoll',
        payload: robotvo ,
        callback: res => {
          console.log('编辑', res);
          if (res.code === 0) {
            message['success'](`${res.msg}`);
            this.collaboraGetCollList();
          }else{
            this.setState({ login: false });
          }
        },
      });
    });
  };

  feel = item => {
    console.log(item);
    if (item === 'false') {
      this.setState(
        {
          addModel: false,
        },
        () => {
          this.collaboraGetCollList();
        }
      );
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { addModelRedact, drawerName, RedactEditUserObj } = this.state;
    const operationDate = [
      {
        title: '',
        width: '50px',
      },
      {
        title: '账户',
        dataIndex: 'cooperationId',
        align: 'left',
        width: 'calc(18vw)',
      },
      {
        title: '用户名称',
        dataIndex: 'cooperationName',
        align: 'center',
        width: 'calc(18vw)',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center',
        width: 'calc(18vw)',
        render(item) {
          return (
            <div className={styles.hull}>
              <span>{moment(Number(item)).format('YYYY-MM-DD h:mm:ss')}</span>
            </div>
          );
        },
      },
      {
        title: '',
        width: '250px',
        align: 'center',
        render: (text, item, index) => {
          return (
            <div className={styles.pb}>
              <div className={styles.tool}>
                <img
                style={{ margin: '0px 20px 0px 0px' }}
                  onClick={() => {
                    this.Redact(item, index);
                  }}
                  src={bianji}
                />
                {/* <img
                  onClick={() => {
                    this.deleteObject(item, index);
                  }}
                  style={{ margin: '0px 20px 0px 15px' }}
                  src={edit}
                /> */}
                <span className="zdyswer">
                  <Switch
                    onClick={() => {
                      this.rktbonChange(item, index);
                    }}
                    defaultChecked
                    checked={!item.cooperationStatus}
                  />
                </span>
              </div>
              <img src={moreImg} className={styles.more} />
            </div>
          );
        },
      },
    ];
    return (
      <div>
          <div className={styles.backgroundp}>
            <p style={{ marginLeft: 20, marginTop: 10 }} className="titleA">
              协作开发
            </p>
            <img
              onClick={this.append}
              style={{ marginLeft: 15, cursor: 'pointer' }}
              src={editImg}
            />
            <span
              style={{ float: 'right', marginRight: 23, position: 'relative', bottom: 8 }}
              className="zdyinputa"
            >
              <Search
                placeholder="请输入账户"
                onSearch={value => {
                  console.log(value);
                  this.setState({ cooperationId : value, current: 1 }, () => {
                    this.collaboraGetCollList();
                  });
                }}
                style={{ height: 50, width: 312 }}
              />
            </span>
            <div style={{ height: 20 }} />
            <Spin spinning={this.state.login}>
              <div className={styles.dabj} style={{ padding: '0px 20px' }}>
                <div className={styles.border} style={{ position: 'relative', right: '2px' }}>
                  <Table
                    className="zdyTable"
                    columns={operationDate}
                    dataSource={this.state.list} //数据
                    pagination={false}
                  />
                </div>
              </div>
              <Pagination
                style={{ textAlign: 'center', marginTop: 20 }}
                total={this.state.total}
                pageSize={this.state.pageSize} // 显示几条一页
                current={this.state.current} // 当前页
                showSizeChanger={true} // 是否显示可以设置几条一页的选项
                onChange={this.onChangeTable}
                onShowSizeChange={this.onShowSizeChangeTable}
                showTotal={() => `共 ${this.state.total} 条`}
              />
            </Spin>
          </div>
          <Drawer
            className="zdyset"
            title={
              <span style={{ cursor: 'pointer' }} onClick={this.onClosebj}>
                <Icon style={{ marginRight: 20 }} type="arrow-left" />
                {drawerName}
              </span>
            }
            placement="right"
            closable={false}
            onClose={this.onClosebj}
            visible={this.state.addModel}
            width="calc(100vw - 245px)"
            destroyOnClose
          >
            {addModelRedact === '1' ? (
              <AddEditUser sysList={this.state.sysList} feel={this.feel} />
            ) : (
              <RedactEditUser sysList={this.state.sysList} feel={this.feel} RedactEditUserObj={RedactEditUserObj} />
            )}
          </Drawer>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(TeamWord));
